<template>
  <div>
    <!-- 标题 -->
    <h2 class="text-center">用户管理</h2>



    <el-row :gutter="22" type="flex">
      <el-col :span="7">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div v-for="o in 1" :key="o" class="text item">
              <div style="position: relative;margin-bottom: 10px;">
                <img src="../../assets/1.jpg" alt="" style="width: 100px; height: 100px;border-radius: 50px;">
                <div style="position: absolute; top: 20px; left: 200px;">
                  <h2>kk</h2>
                  <div>超级管理员</div>
                </div>
                <hr>
                <div class="user-info-list">
                  上次登录时间：
                  <span>2022-06-01</span>
                </div>
                <div class="user-info-list">
                  上次登录地点：
                  <span>惠州</span>
                </div>
              </div>
            </div>
          </el-card>

          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>语言</span>
            </div>
            <div class="text" style="padding: 15px 0">
              Vue
              <el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript
              <el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS
              <el-progress :percentage="13.7"></el-progress>HTML
              <el-progress :percentage="5.9" color="#f56c6c"></el-progress>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-card class="box-card" style="width:1140px">
            <div v-for="o in 1" :key="o" class="text item">
              <!-- 用户列表 -->
              <table class="table table-bordered table-striped table-hover">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>头衔</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in userlist" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.position}}</td>
                    <td><a href="#" @click.prevent="goto(item.id)">详情</a></td>
                  </tr>
                </tbody>
              </table>
              <div class="form-contro">
                <span>共 1 页</span>
                <el-pagination background layout="prev, pager, next" :total="1" style="display:inline-block">
                </el-pagination>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-card shadow="hover" style="height:403px;">
      <template #header>
        <div class="clearfix">
          <span>待办事项</span>
          <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
        </div>
      </template>

      <el-table :show-header="false" :data="todoList" style="width:100%;">
        <el-table-column width="40">
          <template #default="scope">
            <el-checkbox v-model="scope.row.status"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column>
          <template #default="scope">
            <div class="todo-item" :class="{
                                        'todo-item-del': scope.row.status,
                                    }">{{ scope.row.title }}</div>
          </template>
        </el-table-column>
        <el-table-column width="60">
          <template>
            <i class="el-icon-edit"></i>
            <i class="el-icon-delete"></i>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MyUser',
  data() {
    return {
      // 用户列表数据
      userlist: [
        { id: 1, name: '嬴政', age: 18, position: '知县' },
        { id: 2, name: '李斯', age: 35, position: '丞相' },
        { id: 3, name: '吕不韦', age: 50, position: '商人' },
        { id: 4, name: '刘润生', age: 48, position: '知府' },
        { id: 5, name: '韩刚龙', age: 32, position: '总督' },
        { id: 6, name: '孙丽萍', age: 45, position: '帝王' },
        { id: 7, name: '陈桂平', age: 23, position: '县长' },
        { id: 8, name: '李熙平', age: 12, position: '师长' },
        { id: 9, name: '董三女', age: 24, position: '连长' },

      ],
      todoList: [
        {
          title: "今天是个好日子",
          status: false,
        },
        {
          title: "今天要修复10个bug",
          status: false,
        },
        {
          title: "今天是个敲代码的好日子",
          status: false,
        },
        {
          title: "今天接着敲代码",
          status: false,
        },
        {
          title: "今天要修复100个bug",
          status: true,
        },
        {
          title: "今天就小小偷个懒",
          status: true,
        },
        { id: 1, name: '嬴政', age: 18, position: '始皇帝' },
        { id: 2, name: '李斯', age: 35, position: '丞相' },
        { id: 3, name: '吕不韦', age: 50, position: '商人' },
        { id: 4, name: '赵姬', age: 48, position: '王太后' }
      ]
    }
  },
  methods:{
    goto(id) {
      this.$router.push('/home/ifo/' + id)
    }
  }
}
</script>




<style lang="less" scoped>





.form-contro {
  width: 100%;
  text-align: right;
  padding-right: 20px;
}
    .text {
      font-size: 14px;
    }
  
    .item {
      padding: 18px 0;
    }
  
    .box-card {
      width: 480px;
    }
        .el-row {
          margin-bottom: 20px;
    
          &:last-child {
            margin-bottom: 0;
          }
        }
    
        .el-col {
          border-radius: 4px;
        }
    
        .bg-purple-dark {
          background: #99a9bf;
        }
    
        .bg-purple {
          background: #d3dce6;
        }
    
        .bg-purple-light {
          background: #e5e9f2;
        }
    
        .grid-content {
          border-radius: 4px;
          min-height: 36px;
        }
    
        .row-bg {
          padding: 10px 0;
          background-color: #f9fafc;
        }
                .user-info-list {
                  font-size: 14px;
                  color: #999;
                  line-height: 25px;
                }
        
                .user-info-list span {
                  margin-left: 70px;
                }
                    .todo-item-del {
                      text-decoration: line-through;
                      color: #999;
                    }
</style>



